<template>

    <div class="hello" style="width=Width;height=Height;">

        <el-container v-if="!errorFlages">
            <utabbar :tabactiv="2"></utabbar>
        </el-container>

        <el-main v-if="!errorFlages">

            <el-card class="box-card" style="" :body-style="{ padding: '0px' }">
                <img  :src="'http://110.42.188.221:8989/SchoolImg/' + tableData[0].CollegeCode + '.jpg'" class="image">
                <div>
                    <el-descriptions class="margin-top info" title="院校信息" :column="4" direction="vertical">
                        <el-descriptions-item label="院校名称">{{ tableData[0].schoolName }}</el-descriptions-item>
                        <el-descriptions-item label="院校代号">{{ tableData[0].schoolCode }}</el-descriptions-item>
                        <el-descriptions-item label="省份" :span="2">{{ tableData[0].province }}
                        </el-descriptions-item>
                        <el-descriptions-item label="办学类型">
                            <el-tag size="small">{{ tableData[0].schoolType }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="城市">{{ tableData[0].citys }}</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>
            <div class="center">
                <h1><span>|</span>&nbsp;开设专业</h1>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="Professionalnametype" label="专业类" width="180">
                    </el-table-column>
                    <el-table-column prop="professionalName" label="专业名称" width="120">
                    </el-table-column>
                    <el-table-column prop="totalNumberOfPlans" label="总计划招生数量" width="120">
                    </el-table-column>
                    <el-table-column prop="numberOfPlans" label="计划招生数量" width="120">
                    </el-table-column>
                    <el-table-column prop="electiveSubjectRequirements" label="选考科目" width="100">
                    </el-table-column>
                    <el-table-column prop="regularBatch" label="批次" width="70">
                    </el-table-column>
                    <el-table-column prop="annualFee" label="年收费" width="80">
                    </el-table-column>
                    <el-table-column prop="TheLowestRankingIn2021" label="2021投递线" width="120">
                    </el-table-column>
                    <el-table-column prop="TheLowestRankingIn2020" label="2020投递线" width="120">
                    </el-table-column>

                    <!-- TheLowestRankingIn2021 -->
                    <!-- annualFee -->
                    <!-- electiveSubjectRequirements -->
                    <!-- regularBatch -->
                    <el-table-column  prop="SubjectAssessmentFor4" label="第四次学科评价" width="60">
                    </el-table-column>
                 
                </el-table>
                <el-pagination  @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total">
                    </el-pagination>

            </div>
            <div class="box-card2 box-card3" style="" :body-style="{ padding: '0px' }">

                <h1><span>|</span>&nbsp;详细信息</h1>

                <div>
                    <el-descriptions class="margin-top " title="" :column="4" direction="vertical">
                        <el-descriptions-item label="详情">
                            <span :style="'font-size:' + fontSize + 'px ;'" class="fontSchool">{{ Stext }}</span>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>

            <div class="fengguang">
                <div>
                    <h1><span>|</span>&nbsp;院校风光</h1>

                </div>
                <div class="ftop">

                    <el-carousel :interval="4000" type="card" height="200px">
                        <el-carousel-item v-for="item in sImg" :key="item">
                            <!-- <el-image :src="item.url" lazy></el-image> -->
                            <img :src="item.url" alt="" class="yimg yimgs">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>

        </el-main>
        <div class="erro" v-if="errorFlages">
            <el-alert v-if="errorFlages" title="未找到信息" type="warning" description="暂未收录，正在完善中" show-icon>
            </el-alert>
            <el-row v-if="errorFlages">

                <el-button type="warning" @click="$router.go(-1)">回到上一页</el-button>
            </el-row>
        </div>
    </div>

</template>
<script>
import tabbar from "./fceecomponents/my-tabbar.vue"
import utabbar from "./fceecomponents/uitabbar.vue"
import tool from "./tool/tool";
import Vue from "vue";
import { url } from "node-libs-browser";
import imgNaturalwidthNaturalheight from "caniuse-lite/data/features/img-naturalwidth-naturalheight";

export default {
    components: {
        tabbar,
        utabbar
    },
    data() {
        return {
            screenWith: 0,
            tableData: {},
            Stext: "",
            screenSize: null,
            fontSize: null,
            schoolimg: null,
            height: null,
            flages: false,
            sImg: null,//院校图片
            imgWidth: 0,
            imgHeight: 0,
            errorFlages: false,
            total:0,
            pages:1
        }
    },
    methods: {
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pages=val
        this.getSchoolInfo()
      },
        getwidth: function () {
            this.screenWith = tool.$getWindowWidth();
            // console.log("infO获取屏幕宽度" + this.screenWith)

        },
        // scode1,ProfessionalCode
        getSchoolInfo: function (code, name) {
            var url = "/school/getSchoolinfo?CollegeCode=" + code + "&SchoolName=" + name+"&pageNum="+this.pages
            tool.$request("GET", url).then(response => {
                // console.log("测试")
                this.tableData = response.rows
                this.total = response.total
                console.log(response.rows)
                if (this.tableData.length == 0) {
                    this.errorFlages = true

                }
            })
            this.flages = true

        },
        getSchoolInfoV: function (scode1, ProfessionalCode) {
            var url = "/school/getSchoolinfo?SchoolCode=" + scode1 + "&ProfessionalCode=" + ProfessionalCode
            tool.$request("GET", url).then(response => {
                // console.log("测试")
                this.tableData = response.rows

                console.log(response.rows)
                if (this.tableData.length == 0) {
                    this.errorFlages = true

                }

            })
            // this.flages=true

        },

         // scode1,ProfessionalCode
         getSchoolInfoImg: function (schoolCodes,schoolName) {
            var url = "/school/getSchoolinfo?SchoolCode=" + schoolCodes+ "&SchoolName" +schoolName+ "&pageNum="+this.pages
            tool.$request("GET", url).then(response => {
                // console.log("测试")
                this.tableData = response.rows
                this.total = response.total
                console.log(response.rows)
                if (this.tableData.length == 0) {
                    this.errorFlages = true

                }
            })
            this.flages = true

        },
        getInfo: function () {
            // console.log(执行)
            // alert("执行")
            var schoolCode = this.$route.params.id
            var schoolCodes = this.$route.params.ids
            var schoolName = this.$route.params.name
            // alert("测试"+schoolCodes)
            // alert("测试"+schoolName)
            var scode1 = this.$route.params.scode1s
            var Professionalsl = this.$route.params.Prof
            if (schoolCode != undefined && schoolName != undefined) {
               
                this.getSchoolInfo(schoolCode, schoolName)

                

                // alert("测试")

            }       
            else if (scode1 != undefined && Professionalsl != undefined) {
                this.getSchoolInfoV(scode1, Professionalsl)

                console.log(scode1)
                // alert(scode1)
                // alert(Professionalsl)
            }else if(schoolCodes!=undefined||schoolName!=undefined){
                this.getSchoolInfoImg(schoolCodes,schoolName)
            }

            else {
                alert('参数错误')
            }


            // this.getImg()

        },

        getSchoolText: function () {
            console.log("请求")
            var schoolCode = this.$route.params.id
            let url = "http://110.42.188.221:8989/SchoolText/" + schoolCode + ".txt"
            tool.$request("GET", url).then(res => {
                console.log(res)
                this.Stext = res
            })
        },

        setScreen: function () {
            let width = tool.$getWindowWidth()
            if (width < 900) {
                // console.log("屏幕变动")
                this.height = 5
            }
        },
        getImg: function () {
            var schoolCode = this.$route.params.id
            console.log("执行img")
            console.log(schoolCode)
            var that = this
            // console.log("tb值为" + this.tableData[0].schoolCode)
            // str = schoolCode.
            let url1 = "http://110.42.188.221:8989/CampusScenery/" + schoolCode
            console.log("请求2")
            tool.$request("GET", url1).then(res => {
                console.log(res)
                that.sImg = res
                // alert(that.sImg)
                // console.log(that.sImg)
            })



        },

    },
    onload() {
    },
    created() {

        this.getInfo();

        //   this.getSchoolInfo()
        this.getSchoolText()
        this.setScreen()
        this.getImg()
        this.imgWidt = tool.$getWindowWidth / 10;
        this.imgHeight = tool.$getWindowHeight / 10


    },
    mounted() {
        this.screenWidth = document.body.clientWidth
        window.onresize = () => {
            return (() => {
                this.screenWidth = document.body.clientWidth
            })()
        },
            // event Bus 用于无关系组件间的通信。
            Vue.prototype.$bus = new Vue()
    },
    watch: {
        screenWidth: {
            handler: function (val) {
                if (val < 900) {
                    this.fontSize = 10
                    // this.height = 20
                    console.log(val + '屏幕宽度小于900px')
                } else {
                    console.log(val + '屏幕宽度大于900px')
                }
            },
            immediate: true,
            deep: true
        },
    }

}

</script>
<style scoped>
.ftop {
    width: 100%;
    position: absolute;
    top: 100px;
    /* left: 4rem; */
}

.erro {
    /* margin-top: 400px; */
}

.el-alert {
    text-align: center;
}

.el-carousel__container {
    background-color: #ffff;
}

template {
    background-color: aliceblue;
}

.time {
    font-size: 13px;
    color: #999;
}


.box-card2 {
    height: 30vh;
}

@media only screen and (max-width: 600px) {

    .box-card2 {
        height: 70vh;
    }

    .fengguang {}
}

@media only screen and (max-width: 500px) {

    .box-card2 {
        height: 90vh;
    }

    .fengguang {}
}

@media only screen and (max-width: 400px){

     .box-card3 {
        height: 100vh;
    }
    .fengguang {
        margin-top: 300px;
    }
}


.yimgs{
        width: 665px;
        height: 260px;
    }
@media only screen and (max-width: 1000px) {

    .box-card2 {
        height: 40vh;
    }

    .yimg {
        width: 500px;
        height: 250px;
    }

    

    @media screen and (max-width :500) {
        .box-card2 {
            height: 30vh;
        }

        h1 {
            position: absolute;
            top: 100rem;
        }

        .yimg {
            width: 100%;
            height: 100%;
        }

    }

    .fengguang {}
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    height: 40vh;
}

.el-row {
    background-color: #ffff;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.image {
    /* width: rem;s */
    /* height: 2.3rem; */
    width: 180px;
    height: 180px;
    position: relative;
    top: 1rem;
    left: 1rem;
    display: block;
}

.info {
    position: relative;
    left: 4rem;
    bottom: 2rem;
    font-size: 0.3rem;
}

.center {
    width: 100%;
    height: 100%;

    /* background-color: aquamarine; */
}

h1 {
    position: relative;
    float: left;
    top: 0.1rem;
    margin-bottom: 0.4rem;
}

h1 span {
    color: rgb(222, 48, 48);
}

el-table {
    position: absolute;
    /* top: 1rem; */
}

@font-face {
    font-family: Misans;
    src: url(../../src/assets/ttf/MiSans-Light.ttf);
}

@font-face {
    font-family: reg;
    src: url(../../src/assets/ttf/Regular.ttf);
}

.fontSchool {
    font-family: reg;
    font-size: 0.2rem;
    height: 10rem;


}
</style>
  